<template>
<div class="body">
	<div class="body_nav">
		<div class="body_can" v-for="(item,index) in listItem" :key="index" :class="defaultIndex===index?'red':''" @click="onClick(index)">{{item}}</div>
	</div>
</div>
</template>

<script>
	export default {
		props: {
			listItem: {
				required: true,
				type: Array,
			},
		},
		data() {
			return {
				defaultIndex: 0
			};
		},
		methods: {
			onClick(index) {
				this.defaultIndex = index;
				this.$emit("onclick", index);
			},
		},
	};
</script>

<style scoped>
	.body {
		height: 32px;
		overflow: scroll;
	}

	.body_nav {
		width: 200%;
		height: 32px;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.body_can {
		width: 40px;
		height: 32px;
	}

	.red {
		border-bottom: 1px solid red;
		color: red;
		font-size: 18px;
	}
</style>
